<template>
    <transition-group
        name="animate__animated animate__bounce"
        :appear="true"
        enter-active-class="animate__fadeInLeftBig"
        leave-active-class="animate__fadeOutLeftBig"
    >
        <div class="national-container" :key="1">
            <el-row type="flex" justify="space-between">
                <el-col :span="12" class="leftTop">
                    <p>国内疫情实时数据</p>
                    <p>更新数据时间：{{ lastUpdateTime }}</p>
                    <p>北京时间：{{ beijingTime }}</p>
                </el-col>
                <el-col :span="12" class="rightTop">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card>
                                <p>境外输入</p>
                                <p>{{ chinaTotal.total["input"] }}</p>
                                <p>
                                    较昨日<span>{{
                                        "+" + chinaTotal.today["input"]
                                    }}</span>
                                </p>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <p>无症状感染者</p>
                                <p>{{ chinaTotal.extData.noSymptom }}</p>
                                <p>
                                    较昨日<span>{{
                                        "+" + chinaTotal.extData.incrNoSymptom
                                    }}</span>
                                </p>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <p>现有确诊</p>
                                <p>
                                    {{
                                        chinaTotal.total.confirm -
                                        chinaTotal.total.heal -
                                        chinaTotal.total.dead
                                    }}
                                </p>
                                <p>
                                    较昨日<span>{{
                                        "+" + chinaTotal.today.storeConfirm
                                    }}</span>
                                </p>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-card>
                                <p>累计确诊</p>
                                <p>{{ chinaTotal.total.confirm }}</p>
                                <p>
                                    较昨日<span>{{
                                        chinaTotal.today.confirm
                                    }}</span>
                                </p>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <p>累计死亡</p>
                                <p>{{ chinaTotal.total.dead }}</p>
                                <p>
                                    较昨日<span>{{
                                        "+" + chinaTotal.today.dead
                                    }}</span>
                                </p>
                            </el-card>
                        </el-col>
                        <el-col :span="6">
                            <el-card>
                                <p>累计治愈</p>
                                <p>{{ chinaTotal.total.heal }}</p>
                                <p>
                                    较昨日<span>{{
                                        "+" + chinaTotal.today.heal
                                    }}</span>
                                </p>
                            </el-card>
                        </el-col>
                        <!-- <el-col :span="6">
                        <el-card>
                            <p>累计治愈</p>
                            <p>{{ chinaTotal.heal }}</p>
                            <p>
                                较昨日<span>{{ "+" + chinaAdd.heal }}</span>
                            </p>
                        </el-card>
                    </el-col>  -->
                        <!-- <el-col :span="6">
                        <el-card>
                            <p>累计死亡</p>
                            <p>{{ chinaTotal.dead }}</p>
                            <p>
                                较昨日<span>{{ "+" + chinaAdd.dead }}</span>
                            </p>
                        </el-card>
                    </el-col>  -->
                    </el-row>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col :span="12" class="leftBottom">
                    <el-table :data="chinaData" border height="500">
                        <el-table-column prop="name" label="省份">
                        </el-table-column>
                        <el-table-column prop="confirm" label="总确诊">
                        </el-table-column>
                        <el-table-column prop="nowConfirm" label="现有确诊">
                        </el-table-column>
                        <el-table-column prop="heal" label="治愈">
                        </el-table-column>
                        <el-table-column prop="dead" label="死亡">
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="12" class="rightBottom">
                    <echart-china :regionTotal="regionTotalArr"></echart-china>
                </el-col>
            </el-row>
        </div>
    </transition-group>
</template>

<script>
//解决跨域问题
const jsonp = require("jsonp");
import axios from "axios";
import moment from "moment";
import MapPage from "./components/Map";
export default {
    name: "NationalData",
    data() {
        return {
            // 国内疫情面板数据
            chinaTotal: {
                today: {},
                total: {},
                extData: {},
            },
            // 国内疫情较昨日增加数量
            chinaAdd: {},
            // 各地区综合数据
            regionTotalArr: [],
            // 当前疫情更新的时间
            lastUpdateTime: null,
            // 国内疫情数据(接口)
            chinaData: [],
            // 定时器标识符
            timer: null,
            // 北京时间
            beijingTime: null,
            province: [],
        };
    },
    components: {
        "echart-china": MapPage,
    },
    created() {
        this.getData();
    },
    mounted() {
        // 定时刷新时间
        this.timer = setInterval(() => {
            this.beijingTime = moment().format("YYYY年MM月DD日 ddd h:mm:ss");
        }, 100);
    },
    destroyed() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    methods: {
        // 获取当前各个地区的确诊人数, 返回地图组件区域名字与颜色
        getData() {
            axios
                .get("/apiUrl/ug/api/wuhan/app/data/list-total")
                .then((res) => {
                    console.log(res);
                    if (res.status == 200 && res.data.code == 10000) {
                        this.chinaTotal = res.data.data
                            ? res.data.data.chinaTotal
                            : {};
                        this.chinaData = res.data.data
                            ? res.data.data.chinaDayList
                            : {};
                        this.regionTotalArr = res.data.data
                            ? res.data.data.areaTree
                                  .filter((item) => item.name == "中国")[0]
                                  .children.map((item) => {
                                      return {
                                          name: item.name,
                                          value:
                                              item.total.confirm -
                                              item.total.dead -
                                              item.total.heal,
                                      };
                                  })
                            : {};
                        this.chinaData = res.data.data.areaTree
                            .filter((item) => item.name == "中国")[0]
                            .children.map((item) => {
                                return {
                                    name: item.name,
                                    confirm: item.total.confirm,
                                    nowConfirm:
                                        item.total.confirm -
                                        item.total.dead -
                                        item.total.heal,
                                    dead: item.total.dead,
                                    heal: item.total.heal,
                                };
                            });
                    } else {
                        this.$message("请求出错");
                    }
                });
        },
    },
};
</script>

<style lang="scss" scoped>
p {
    margin: 0;
    padding: 0;
}
.national-container {
    .leftTop {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p:first-child {
            font-size: 60px;
            color: #f56c6c;
        }
        p:nth-child(2) {
            color: skyblue;
            font-size: 20px;
            margin: 10px 0px;
        }
        p:nth-child(3) {
            color: #ecb35c;
            font-size: 20px;
        }
    }
    .rightTop {
        .el-card {
            width: 150px;
            height: 80px;
            border-radius: 10px;
            box-sizing: border-box;
            color: black;
            font-size: 12px;
            border: 1px solid black;
        }
        .el-row:first-child {
            margin-bottom: 20px;
            .el-col:nth-child(1) .el-card {
                background-color: #fcf1f0;
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #fd5041;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #fd5041;
                    }
                }
            }
            .el-col:nth-child(2) .el-card {
                background-color: #fff6ee;
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #ffa14e;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #ffa14e;
                    }
                }
            }
            .el-col:nth-child(3) .el-card {
                background-color: #f1f7f2;
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #56bc7c;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #56bc7c;
                    }
                }
            }
            .el-col:nth-child(4) .el-card {
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #5c92ca;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #5c92ca;
                    }
                }
            }
        }
        .el-row:last-child {
            margin-bottom: 20px;
            .el-col:nth-child(1) .el-card {
                background-color: #fcf1f0;
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #fd5041;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #fd5041;
                    }
                }
            }
            .el-col:nth-child(2) .el-card {
                background-color: #fff6ee;
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #ffa14e;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #ffa14e;
                    }
                }
            }
            .el-col:nth-child(3) .el-card {
                background-color: #f1f7f2;
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #56bc7c;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #56bc7c;
                    }
                }
            }
            .el-col:nth-child(4) .el-card {
                text-align: center;
                p:first-child {
                    font-size: 18px;
                    border-bottom: 1px solid #7d7d7d;
                    padding: 3px 0px;
                    color: black;
                }
                p:nth-child(2) {
                    margin: 3px 0px;
                    font-size: 20px;
                    color: #5c92ca;
                }
                p:last-child {
                    font-size: 13px;
                    span {
                        margin-left: 3px;
                        color: #5c92ca;
                    }
                }
            }
        }
    }
    .leftBottom {
        margin: 0px auto;
    }
}
</style>
